<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition>
        <p:hotkey bind="esc" handler="fsd.hide()"/>            
        <p:dialog id="fileselectdialog" widgetVar="fsd" header="Select files" modal="true" >
            <h:form id="filesform" prependId="false" enctype="multipart/form-data" >
                <p:dataGrid id="filegrid" var="file" value="#{fileUploadController.files}" columns="6"  
                            rows="24" paginator="true"   
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                            rowsPerPageTemplate="24,36,60"> 
                    <p:column>  
                        <p:panel> 
                            <div style="width: 100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">#{file.name}</div> 
                            <div style="width: 100px; height:100px;overflow:hidden;">
                                <p:commandLink  update=":filesform :userform:useravatar" oncomplete="fsd.hide()">  
                                    <h:graphicImage value="/upload/#{file.userName.name}/#{file.name}" width="100px"/>   
                                    <f:setPropertyActionListener value="#{file}" target="#{profileController.current.avatar}" />                                </p:commandLink>
                            </div>
                            <p:commandButton update=":filesform :userform:useravatar" icon="ui-icon-plusthick" oncomplete="fsd.hide()">  
                                <f:setPropertyActionListener value="#{file}" target="#{profileController.current.avatar}" />
                            </p:commandButton>  
                        </p:panel>  
                    </p:column> 
                </p:dataGrid>

                <h:outputLabel id="ajx">
                    <f:ajax event="click" listener="#{fileUploadController.refreshFiles()}" render=":filesform" />
                </h:outputLabel>
                <script>
                    function update_file_list(){
                        document.getElementById("ajx").onclick();
                    }
                </script>
                <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"  
                              mode="advanced"   
                              oncomplete="update_file_list()"
                              sizeLimit="100000"   
                              multiple="true"
                              allowTypes="/(\.|\/)(gif|jpe?g|png)$/" 
                              >
                </p:fileUpload>

            </h:form>
        </p:dialog>
    </ui:composition>
</html>

